<template>
  <div class="subList">
    <myadd title="我的频道" info="点击进入频道" :showBtn="true" @onEdit="edit" :showx="showx" @onClickmark="clickmysub" :list="list1" :anima="anima"></myadd>
    <myadd :hasplus="true" :list="list2" title="频道推荐" info="点击添加频道" @onClickmark="addsub" ></myadd>
  </div>
</template>

<script>
  import myadd from "../components/sublist/myadd";
  export default {
    name: "subList",
    data() {
      return {
        anima:false,
        showx: false,
        //默认标签总和
        list: [{
            checkName: "邀标",
            isSelected: false
          },
          {
            checkName: "询价",
            isSelected: false
          },
          {
            checkName: "竞谈",
            isSelected: false
          },
          {
            checkName: "单一",
            isSelected: false
          },
          {
            checkName: "竞价",
            isSelected: false
          },
          {
            checkName: "变更",
            isSelected: false
          },
          {
            checkName: "中标",
            isSelected: false
          },
          {
            checkName: "废标",
            isSelected: false
          }
        ],
        //后台拉取过来的已添加的标签
        list1: [{
            checkName: "邀标",
            isSelected: false
          },
          {
            checkName: "废标",
            isSelected: false
          }
        ],
        list2: []
      };
    },
    computed: {
    },
    methods: {
      edit() {
        //点击编辑按钮
        this.showx = this.showx ? false : true;
      },
      clickmysub(e) {
        //点击我的频道按钮
        if (this.showx) {
          //如果是编辑状态
          this.list2.unshift(this.list1[e]);
          this.list1.splice(e, 1);
        } else {
          //非编辑状态
          console.log("非编辑状态，跳转页面");
        }
      },
      addsub(e) {
        //添加频道内容
        this.list1.push(this.list2[e]);
        this.list2.splice(e, 1);
      }
    },
    components: {
      myadd
    },
    mounted() {
      var temp = [];
      this.list.forEach(e => {
        temp.push(e);
      })
      temp.forEach((e, i) => {
        this.list1.forEach(a => {
          if (e.checkName == a.checkName) {
            temp.splice(i, 1);
          }
        })
      })
      this.list2 = temp
      this.anima=true;
    }
  };

</script>

<style scoped lang="scss">
  @import "../styles/common.scss";

</style>
